<%--
  Created by IntelliJ IDEA.
  User: FENG1
  Date: 2022-05-23
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        .layui-form-item{
            margin-top:-62px;
        }
        .table-search-fieldset{
            height: 50px;
        }
        .sousuo{
            width: 700px;
            margin-left: 20px;
            position: absolute;
        }
        .layui-table-page{
            background-color: white;
        }
        .baohan{
            position: absolute;
            margin-top:-45px;
            width: 200px;
        }
        .layui-table-tool{
            height: 80px;
            margin-bottom: 10px;
        }
        .Zfdd{
            text-align:center;
            line-height: 40px;
            margin-left: 95px;
        }
    </style>
</head>
<body>
        <div class="layui-card">
            <div class="layui-card-body">
                <h1 style="text-align: center;padding: 20px">商品列表</h1>
            </div>
            <form class="layui-form layui-form-pane " >
                <div class="layui-form-item sousuo">
                    <div class="">
                        <label class="layui-form-label">商品销售</label>
                        <div class="layui-input-inline">
                            <input type="text" name="goodsName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="">
                        <button type="button" class="layui-btn layui-btn-primary"  lay-submit lay-filter="goodsFormSubmit"><i class="layui-icon"></i> 搜 索</button>
                    </div>
                </div>
            </form>
        </div>
        <table class="layui-hide" id="goodsTableId" lay-filter="goodsTableFilter"></table>
        <script type="text/html" id="userOperate">
            <a class="layui-btn layui-btn-warm " lay-event="purchase"> <i class="layui-icon layui-icon-cart-simple">商品购买</i></a>
        </script>
        <script type="text/html" id="delOrder"><%--删除操作--%>
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
        </script>
        <script type="text/html" id="OrderbarDemo">
            <div class="layui-card-body">
                <h1 class="Zfdd">支付订单</h1>
            </div>
            <div class="baohan">
                <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="Zhifu">
                    <i class="layui-icon layui-icon-rmb"></i>
                    支付
                </button>
                <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="memberZhifu">
                    <i class="layui-icon layui-icon-diamond"></i>
                    会员支付
                </button>
             <div>
        </script>
        <table class="layui-hide" id="OrdersTableId" lay-filter="OrderTableFilter"></table>
        <div class="layui-card">
            <div class="layui-card-body">
                <h3 style="text-align: right;margin: 10px 0 " >总价：<span id="zongjia" style="font-size: 22px;font-weight: bolder" ></span>&emsp;<span style="margin-right: 100px">&nbsp;元</span></h3>
            </div>
        </div>
<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
<script>
    //引入table
    layui.use(['table','form'],function () {
        var $ = layui.jquery;
        var from = layui.form;
        var table = layui.table;
        var form = layui.form;
        //执行表格订单的数据填充操作
        table.render({
            elem: '#OrdersTableId',
            url: 'order/allOrder',
            toolbar: '#OrderbarDemo',
            defaultToolbar:[],
            method: 'post',
            page: false,
            even: true,
            cols: [[
                {field: 'goodsId', title: '商品编号', align: 'center'},
                {field: 'goodsName', title: '商品名称', align: 'center'},
                {field: 'goodsCount', title: '商品数量', align: 'center'},
                {field: 'goodsPrice', title: '商品单价',align: 'center',templet:function (data) {
                        return data.goodsPrice+'  元'}},
                {field: 'goodstotlePrice', title: '商品小计',align: 'center',templet:function (data) {
                        return data.goodstotlePrice+'  元'}},
                {title: '操作',toolbar:'#delOrder',minWidth:250, align: 'center'}
            ]],
            parseData: function(res) { //res 即为原始返回的数据
                <%--订单的总价--%>
                var Zj =0;
                for (let i=0;i<res.data.length;i++){
                    Zj+=res.data[i].goodstotlePrice;
                }
                $("#zongjia").text(Zj);
            }
        })
        //执行表格商品的数据填充操作
        table.render({
            //指定渲染的表格
            elem: '#goodsTableId',
            //指定获取数据的路径
            url: 'retail/allRetail',
            defaultToolbar:[],
            //规定请求方式
            method: 'post',
            //开启分页
            page: true,
            check: true,
            //指定每页显示数
            limits: [1,5,10,15,20],
            even: true,
            cols: [[
                {field: 'goodsId', title: '商品编号', align: 'center'},
                {field: 'goodsImg', title: '商品图', align: 'center' ,templet :function(d){
                        var img = '<img  src="'+d.goodsImg+'" style="width:40px;height:40px;">'
                        return img;
                    }},
                {field: 'goodsName', title: '商品名称', align: 'center'},
                {field: 'goodsPrice', title: '商品单价', align: 'center',templet:function (data) {
                        return data.goodsPrice+'  元'}},
                {field: 'brand', title: '品牌',templet: '#brand', align: 'center' },
                {field: 'relationShipTwo', title: '商品类型', templet: '#relationshipTwo',align: 'center'},
                {field: 'specifiCations', title: '单位', align: 'center'},
                {title: '操作',toolbar:'#userOperate',minWidth:250, align: 'center'}
            ]]
        })
        //表单提交事件
        form.on("submit(goodsFormSubmit)",function(data){
            //执行搜索重载
            table.reload('goodsTableId',{
                //规定默认第几页
                page:{
                    curr:1
                },
                where:{
                    //添加请求参数
                    goodsName:data.field.goodsName,
                    specifiCations:data.field.specifiCations,
                    brand:data.field.brand,
                    relationShipOne:data.field.relationShipOne
                }
            });
            return false;
        })
        //表格事件
        table.on('tool(goodsTableFilter)',function (obj) {
            //判断表格的的操作类型
            if (obj.event === 'purchase') {
                layer.open({
                    title:'购买商品',
                    type:2,
                    shade: 0.1,
                    area:['31%','40%'],
                    content: "/retail/purchase?goodsId="+obj.data.goodsId
                })
            }
        })

        table.on('tool(OrderTableFilter)',function(obj){
            var order =obj.data;
            //判断表格的的操作类型
            //删除暂存某订单信息
            if (obj.event === 'delete') {
                layer.confirm('确定要删除该商品吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    $.post("/order/delOrder",obj.data,function(result){
                        if (result.success) {
                            layer.msg(result.msg, {icon: 1, time: 1000},function(){
                               layui.table.reload("OrdersTableId");
                               layui.table.reload("goodsTableFilter");
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    })
                });
            }
        })
        table.on('toolbar(OrderTableFilter)', function(obj) {
            var data = layui.table.cache["OrdersTableId"];//获取整个列表数据
            var ords = new Array();
            for (let i = 0; i < data.length; i++) {
                ords[i] = data[i].goodsId;
            }
            if (obj.event === 'Zhifu') {
                var paymanner = "普通支付";
                if(ords.length<1){
                    layer.msg("请下单商品！！",{
                        icon: 2,
                        time: 1000
                    })
                }else{
                    layer.confirm('确认支付嘛', {
                        icon: 3,
                        title: '提示'
                    }, function(index) {
                        $.post("saleOrder/addSaleOrder",{ords: ords,paymanner:paymanner},function(result){
                            if(result.success){
                                layer.msg(result.msg,{
                                    icon: 1,
                                    time: 1500
                                },function(){
                                    layer.open({
                                        type: 2,
                                        title: '购买单',
                                        shade: 0.1,
                                        area: ['600px', '540px'],
                                        content: '/printouts/index'
                                    })
                                    layui.table.reload("OrdersTableId");
                                })
                            }else{
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        })
                    })
                }
            } else if (obj.event === 'memberZhifu') {
                var ordsStr = "";
                ordsStr+=ords
                if(ords.length<1){
                    layer.msg("请下单商品！！",{
                        icon: 2,
                        time: 1000
                    })
                }else{
                    layer.open({
                        type: 2,
                        title: '会员支付',
                        shade: 0.1,
                        area: ['700px', '170px'],
                        content: '/saleOrder/MemberSaleOrder?ordsStr='+ordsStr
                    });
                }
            }else if (obj.event === 'refresh') {
                window.refresh();
            }
        });
    })
</script>
<script type="text/html" id="brand">
    {{d.brand.brandName}}
</script>
<%--<script type="text/html" id="relationshipOne">
    {{d.relationShipOne.relationshipName}}
</script>--%>
<script type="text/html" id="relationshipTwo">
    {{d.relationShipTwo.relationshipName}}
</script>
</body>
</html>